<template>
  <div class="form-details">
    <hong-form-details class="form-box"
                       :options="formOptions"
                       :tab="true"
                       tabActive="2"
                       :value="form">
      <template slot="slotTestDetail" slot-scope="scope">
        <div style="background: red;height: 60px;color: #fff;">{{scope.$form.loanNumber}}</div>
      </template>
    </hong-form-details>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'form-details',
  components: {
  },
  data () {
    return {
      form: {
        orderCreateTime: '2021-06-18 15:33',
        businessType: '车贷业务',
        loanBank: '宇宙银行',
        loanNumber: '100000',
        businessField: [
          { value: '字段1', code: '值1' },
          { value: '字段2', code: '值2' },
          { value: '字段3', code: '值3' }
        ],
        imageList: [
          {
            label: '附件1',
            value: 'https://cdn.yuuwei.com/hong-form-doc/7.png'
          },
          {
            label: '附件2',
            value: 'https://cdn.yuuwei.com/hong-form-doc/6.jpeg'
          },
          {
            label: '附件3',
            value: 'https://cdn.yuuwei.com/hong-form-doc/5.jpeg'
          },
          {
            label: '附件4',
            value: 'https://cdn.yuuwei.com/hong-form-doc/8.jpg'
          },
          {
            label: '附件5',
            value: 'https://cdn.yuuwei.com/hong-form-doc/5.jpeg'
          },
          {
            label: '附件6',
            value: 'https://cdn.yuuwei.com/hong-form-doc/8.jpg'
          }
        ],
        clientInfo: [
          {
            clientName: '张三',
            clientId: '123123123',
            clientTypeName: '借款人',
            idCardFront: 'https://cdn.yuuwei.com/hong-form-doc/7.png',
            idCardBack: 'https://cdn.yuuwei.com/hong-form-doc/6.jpeg',
            file1: 'https://cdn.yuuwei.com/hong-form-doc/5.jpeg'
          },
          {
            clientName: '李四',
            clientId: '123123123',
            clientTypeName: '共还人',
            idCardFront: 'https://cdn.yuuwei.com/hong-form-doc/8.jpg',
            idCardBack: 'https://cdn.yuuwei.com/hong-form-doc/9.jpg',
            file1: 'https://cdn.yuuwei.com/hong-form-doc/1.jpeg'
          }
        ],
        faceviewInfo: [
          {
            clientNames: ['借款人', '共还人'],
            coPattern: '免预约面签',
            faceViewStatus: '面签失败'
          }
        ],
        clientSimilarity: [
          {
            clientType: '借款人',
            similarity: '80',
            cardPoliceSimilarity: '70',
            personPoliceSimilarity: '60',
            file1: 'https://cdn.yuuwei.com/hong-form-doc/1.jpeg',
            file2: 'https://cdn.yuuwei.com/hong-form-doc/2.jpg',
            fourValidateInfoVO: {
              username: '1',
              bankCard: '2',
              idCard: '3',
              mobile: '4'
            }
          },
          {
            clientType: '共还人',
            similarity: '80',
            cardPoliceSimilarity: '70',
            personPoliceSimilarity: '60',
            file1: 'https://cdn.yuuwei.com/hong-form-doc/3.jpeg',
            file2: 'https://cdn.yuuwei.com/hong-form-doc/4.jpeg',
            fourValidateInfoVO: {
              username: '1',
              bankCard: '2',
              idCard: '3',
              mobile: '4'
            }
          }
        ]
      },
      formOptions: [
        {
          title: '业务信息',
          items: [
            {
              label: '订单创建时间',
              name: 'orderCreateTime',
              isField: false,
              isSpace: true,
              append: '时间',
              labelFormat (form) {
                return form.loanBank + '订单创建时间'
              },
              format (form) {
                return '今天' + form.orderCreateTime
              }
            },
            {
              label: '业务类型',
              name: 'businessType'
            },
            {
              label: '业务银行',
              name: 'loanBank'
            },
            {
              label: '贷款金额',
              name: 'loanNumber'
            },
            {
              label: '',
              name: 'slotTest',
              detailslot: true
            },
            {
              name: 'businessField',
              type: 'value-field',
              isSpace: false,
              isField: false,
              display: true,
              props: {
                label: 'value',
                value: 'code'
              }
            }
          ]
        },
        {
          title: '客户信息',
          items: [
            {
              name: 'clientInfo',
              type: 'recursion', // 递归组件
              options: [
                {
                  items: [
                    {
                      label: '姓名',
                      name: 'clientName'
                    },
                    {
                      label: '身份证号',
                      name: 'clientId'
                    },
                    {
                      label: '身份证正面',
                      name: 'idCardFront',
                      type: 'image',
                      sizeType: 'cover'
                    },
                    {
                      label: '身份证反面',
                      name: 'idCardBack',
                      type: 'image',
                      sizeType: 'contain'
                    },
                    {
                      label: '附件1',
                      name: 'file1',
                      type: 'image',
                      inline: false,
                      sizeType: 'full'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          title: '面签信息',
          items: [
            {
              name: 'faceviewInfo',
              emptyText: '暂无面签信息',
              type: 'recursion',
              options: [
                {
                  items: [
                    {
                      type: 'cell-item',
                      left: '字段1',
                      label: '标题1',
                      right: '值1',
                      valueStyle: 'primary'
                    },
                    {
                      type: 'cell-item',
                      left: '字段2',
                      label: '标题2',
                      right: '值2',
                      valueStyle: 'default',
                      titleFormat (form) {
                        return form.coPattern
                      }
                    },
                    {
                      type: 'cell-item',
                      left: '',
                      right: '',
                      valueStyle: 'blue',
                      leftFormat (form) {
                        return form.clientNames.join('、')
                      },
                      titleFormat (form) {
                        return form.coPattern
                      },
                      rightFormat (form) {
                        return form.faceViewStatus
                      },
                      click: (form) => {
                        // do something
                      }
                    }
                  ]
                }
              ]
            },
            {
              name: 'imageList',
              type: 'image-list',
              isField: true,
              showType: 'swiper',
              height: 3
            },
            {
              name: 'imageList',
              type: 'image-list',
              isField: true,
              showType: 'dialog',
              isDialogText: '附件集',
              height: 2.5
            },
            {
              name: 'imageList',
              type: 'image-list',
              isField: true
            }
          ]
        },
        {
          title: '其他信息',
          items: [
            {
              name: 'clientSimilarity',
              // type: 'recursion', // 递归组件
              type: 'value-tab', // 递归组件
              tabLabel: 'clientType',
              options: [
                {
                  items: [
                    {
                      label: '相似度信息',
                      type: 'sub-title'
                    },
                    {
                      label: '正脸照与身份证相似度',
                      isField: true,
                      isSpace: true,
                      append: '%',
                      name: 'similarity'
                    },
                    {
                      label: '身份证与公安网相似度',
                      isField: true,
                      isSpace: true,
                      append: '%',
                      name: 'cardPoliceSimilarity'
                    },
                    {
                      label: '正脸照与公安网相似度',
                      isField: true,
                      isSpace: true,
                      append: '%',
                      name: 'personPoliceSimilarity'
                    },
                    {
                      label: '附件1',
                      name: 'file1',
                      type: 'image'
                    },
                    {
                      label: '附件2',
                      name: 'file2',
                      type: 'image'
                    },
                    {
                      name: 'fourValidateInfoVO',
                      type: 'single-recursion',
                      options: [
                        {
                          items: [
                            {
                              label: '四要素信息',
                              type: 'sub-title'
                            },
                            {
                              label: '姓名',
                              isField: true,
                              name: 'username'
                            },
                            {
                              label: '银行卡号',
                              isField: true,
                              name: 'bankCard'
                            },
                            {
                              label: '身份证号',
                              isField: true,
                              name: 'idCard'
                            },
                            {
                              label: '手机号',
                              isField: true,
                              name: 'mobile'
                            },
                            {
                              label: '认证结果',
                              isField: true,
                              name: 'result'
                            },
                            {
                              label: '认证时间',
                              isField: true,
                              name: 'validateTime'
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  created () {
    this.$emitter.on('test-msg', (data) => {
      console.log(data)
    })
    setTimeout(() => {
      this.$emitter.emit('test-msg', 'test')
    }, 2000)
  },
  methods: {
  }
}
</script>
<style lang="stylus" scoped>
.form-details
  height 100%
  box-sizing border-box
  background #f6f6f6
  padding-bottom 0.44rem
  .form-box
    height 100%
    overflow auto
</style>
